<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>B端我的</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <script src="navigation-helper.js"></script>
    <style>
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
        }
        .gradient-bg {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        }
    </style>
</head>
<body class="bg-gray-100">
    <div class="mx-auto max-w-[393px] h-[852px] bg-white relative overflow-hidden rounded-[40px] shadow-2xl">
        <!-- Status Bar -->
        <div class="bg-white px-6 pt-3 pb-2">
            <div class="flex justify-between items-center text-xs">
                <span class="font-semibold">9:41</span>
                <div class="flex space-x-1">
                    <i class="fas fa-signal"></i>
                    <i class="fas fa-wifi"></i>
                    <i class="fas fa-battery-full"></i>
                </div>
            </div>
        </div>

        <!-- Header -->
        <div class="gradient-bg px-6 py-4 text-white">
            <div class="flex items-center justify-between mb-4">
                <h1 class="text-lg font-semibold">我的</h1>
                <div class="flex items-center gap-3">
                    <button onclick="openSettings()" class="hover:opacity-80">
                        <i class="fas fa-cog text-xl"></i>
                    </button>
                    <button onclick="openNotifications()" class="relative hover:opacity-80">
                        <i class="fas fa-bell text-xl"></i>
                        <span class="absolute -top-1 -right-1 w-2 h-2 bg-red-500 rounded-full"></span>
                    </button>
                </div>
            </div>

            <!-- Merchant Profile -->
            <div class="flex items-center bg-white/10 backdrop-blur-sm rounded-xl p-4">
                <div class="w-16 h-16 bg-white/20 rounded-full flex items-center justify-center mr-4">
                    <i class="fas fa-store text-2xl text-white"></i>
                </div>
                <div class="flex-1">
                    <h3 class="text-lg font-bold" id="merchant-name">优选数码旗舰店</h3>
                    <p class="text-sm opacity-90" id="merchant-id">商家ID: M2025010001</p>
                    <div class="flex items-center mt-1">
                        <span class="bg-green-500 text-xs px-2 py-1 rounded-full mr-2">已认证</span>
                        <span class="text-xs opacity-80">店铺等级: 金牌商家</span>
                    </div>
                </div>
                <button onclick="editProfile()" class="text-white/80 hover:text-white">
                    <i class="fas fa-edit"></i>
                </button>
            </div>
        </div>

        <!-- Scrollable Content -->
        <div class="h-[calc(852px-280px)] overflow-y-auto pb-16">
            <!-- Quick Stats -->
            <div class="p-4">
                <h3 class="font-semibold mb-3 flex items-center">
                    <span class="w-1 h-4 bg-indigo-600 mr-2 rounded-full"></span>
                    经营概况
                </h3>
                <div class="grid grid-cols-3 gap-3">
                    <div class="bg-gradient-to-br from-blue-50 to-blue-100 rounded-lg p-3 border border-blue-200 text-center">
                        <p class="text-lg font-bold text-blue-600">98.5%</p>
                        <p class="text-xs text-gray-600">好评率</p>
                    </div>
                    <div class="bg-gradient-to-br from-green-50 to-green-100 rounded-lg p-3 border border-green-200 text-center">
                        <p class="text-lg font-bold text-green-600">4.9</p>
                        <p class="text-xs text-gray-600">店铺评分</p>
                    </div>
                    <div class="bg-gradient-to-br from-purple-50 to-purple-100 rounded-lg p-3 border border-purple-200 text-center">
                        <p class="text-lg font-bold text-purple-600">2年</p>
                        <p class="text-xs text-gray-600">入驻时长</p>
                    </div>
                </div>
            </div>

            <!-- Account Management -->
            <div class="p-4">
                <h3 class="font-semibold mb-3 flex items-center">
                    <span class="w-1 h-4 bg-indigo-600 mr-2 rounded-full"></span>
                    账户管理
                </h3>
                <div class="space-y-2">
                    <div onclick="openCompanyInfo()" class="bg-white rounded-lg border border-gray-200 p-3 flex items-center cursor-pointer hover:bg-gray-50">
                        <div class="w-10 h-10 bg-blue-500 rounded-lg flex items-center justify-center text-white mr-3">
                            <i class="fas fa-building"></i>
                        </div>
                        <div class="flex-1">
                            <p class="text-sm font-medium">企业资料</p>
                            <p class="text-xs text-gray-500">营业执照、认证信息</p>
                        </div>
                        <i class="fas fa-chevron-right text-gray-400"></i>
                    </div>

                    <div onclick="openBankInfo()" class="bg-white rounded-lg border border-gray-200 p-3 flex items-center cursor-pointer hover:bg-gray-50">
                        <div class="w-10 h-10 bg-green-500 rounded-lg flex items-center justify-center text-white mr-3">
                            <i class="fas fa-university"></i>
                        </div>
                        <div class="flex-1">
                            <p class="text-sm font-medium">银行账户</p>
                            <p class="text-xs text-gray-500">收款账户、结算信息</p>
                        </div>
                        <i class="fas fa-chevron-right text-gray-400"></i>
                    </div>

                    <!-- <div onclick="openSecuritySettings()" class="bg-white rounded-lg border border-gray-200 p-3 flex items-center cursor-pointer hover:bg-gray-50"> -->
                        <!-- <div class="w-10 h-10 bg-orange-500 rounded-lg flex items-center justify-center text-white mr-3"> -->
                            <!-- <i class="fas fa-shield-alt"></i> -->
                        <!-- </div> -->
                        <!-- <div class="flex-1"> -->
                            <!-- <p class="text-sm font-medium">安全设置</p> -->
                            <!-- <p class="text-xs text-gray-500">登录密码、手机绑定</p> -->
                        <!-- </div> -->
                        <!-- <i class="fas fa-chevron-right text-gray-400"></i> -->
                    <!-- </div> -->

                    <!-- <div onclick="openApiSettings()" class="bg-white rounded-lg border border-gray-200 p-3 flex items-center cursor-pointer hover:bg-gray-50"> -->
                        <!-- <div class="w-10 h-10 bg-purple-500 rounded-lg flex items-center justify-center text-white mr-3"> -->
                            <!-- <i class="fas fa-code"></i> -->
                        <!-- </div> -->
                        <!-- <div class="flex-1"> -->
                            <!-- <p class="text-sm font-medium">API接口</p> -->
                            <!-- <p class="text-xs text-gray-500">接口密钥、权限管理</p> -->
                        <!-- </div> -->
                        <!-- <i class="fas fa-chevron-right text-gray-400"></i> -->
                    <!-- </div> -->
                </div>
            </div>

            <!-- Store Management -->
            <div class="p-4">
                <h3 class="font-semibold mb-3 flex items-center">
                    <span class="w-1 h-4 bg-indigo-600 mr-2 rounded-full"></span>
                    店铺管理
                </h3>
                <div class="space-y-2">
                    <div onclick="openStoreSettings()" class="bg-white rounded-lg border border-gray-200 p-3 flex items-center cursor-pointer hover:bg-gray-50">
                        <div class="w-10 h-10 bg-indigo-500 rounded-lg flex items-center justify-center text-white mr-3">
                            <i class="fas fa-store"></i>
                        </div>
                        <div class="flex-1">
                            <p class="text-sm font-medium">店铺设置</p>
                            <p class="text-xs text-gray-500">店铺信息、logo、简介</p>
                        </div>
                        <i class="fas fa-chevron-right text-gray-400"></i>
                    </div>

                    <div onclick="openDeliverySettings()" class="bg-white rounded-lg border border-gray-200 p-3 flex items-center cursor-pointer hover:bg-gray-50">
                        <div class="w-10 h-10 bg-cyan-500 rounded-lg flex items-center justify-center text-white mr-3">
                            <i class="fas fa-shipping-fast"></i>
                        </div>
                        <div class="flex-1">
                            <p class="text-sm font-medium">物流配送</p>
                            <p class="text-xs text-gray-500">配送范围、运费设置</p>
                        </div>
                        <i class="fas fa-chevron-right text-gray-400"></i>
                    </div>

                    <div onclick="openPaymentSettings()" class="bg-white rounded-lg border border-gray-200 p-3 flex items-center cursor-pointer hover:bg-gray-50">
                        <div class="w-10 h-10 bg-green-500 rounded-lg flex items-center justify-center text-white mr-3">
                            <i class="fas fa-credit-card"></i>
                        </div>
                        <div class="flex-1">
                            <p class="text-sm font-medium">支付设置</p>
                            <p class="text-xs text-gray-500">支付方式、费率配置</p>
                        </div>
                        <i class="fas fa-chevron-right text-gray-400"></i>
                    </div>
                </div>
            </div>

            <!-- Business Tools -->
            <div class="p-4">
                <h3 class="font-semibold mb-3 flex items-center">
                    <span class="w-1 h-4 bg-indigo-600 mr-2 rounded-full"></span>
                    商务工具
                </h3>
                <div class="space-y-2">
                    <div onclick="openInvoiceCenter()" class="bg-white rounded-lg border border-gray-200 p-3 flex items-center cursor-pointer hover:bg-gray-50">
                        <div class="w-10 h-10 bg-red-500 rounded-lg flex items-center justify-center text-white mr-3">
                            <i class="fas fa-file-invoice"></i>
                        </div>
                        <div class="flex-1">
                            <p class="text-sm font-medium">发票管理</p>
                            <p class="text-xs text-gray-500">开票信息、发票记录</p>
                        </div>
                        <i class="fas fa-chevron-right text-gray-400"></i>
                    </div>

                    <!-- <div onclick="openContractCenter()" class="bg-white rounded-lg border border-gray-200 p-3 flex items-center cursor-pointer hover:bg-gray-50"> -->
                        <!-- <div class="w-10 h-10 bg-blue-500 rounded-lg flex items-center justify-center text-white mr-3"> -->
                            <!-- <i class="fas fa-file-contract"></i> -->
                        <!-- </div> -->
                        <!-- <div class="flex-1"> -->
                            <!-- <p class="text-sm font-medium">合同管理</p> -->
                            <!-- <p class="text-xs text-gray-500">签约记录、合同模板</p> -->
                        <!-- </div> -->
                        <!-- <i class="fas fa-chevron-right text-gray-400"></i> -->
                    <!-- </div> -->

                    <div onclick="openDataExport()" class="bg-white rounded-lg border border-gray-200 p-3 flex items-center cursor-pointer hover:bg-gray-50">
                        <div class="w-10 h-10 bg-purple-500 rounded-lg flex items-center justify-center text-white mr-3">
                            <i class="fas fa-download"></i>
                        </div>
                        <div class="flex-1">
                            <p class="text-sm font-medium">数据导出</p>
                            <p class="text-xs text-gray-500">订单、财务、客户数据</p>
                        </div>
                        <i class="fas fa-chevron-right text-gray-400"></i>
                    </div>
                </div>
            </div>

            <!-- Help & Support -->
            <div class="p-4 pb-8">
                <h3 class="font-semibold mb-3 flex items-center">
                    <span class="w-1 h-4 bg-indigo-600 mr-2 rounded-full"></span>
                    帮助支持
                </h3>
                <div class="space-y-2">
                    <div onclick="openHelpCenter()" class="bg-white rounded-lg border border-gray-200 p-3 flex items-center cursor-pointer hover:bg-gray-50">
                        <div class="w-10 h-10 bg-gray-500 rounded-lg flex items-center justify-center text-white mr-3">
                            <i class="fas fa-question-circle"></i>
                        </div>
                        <div class="flex-1">
                            <p class="text-sm font-medium">帮助中心</p>
                            <p class="text-xs text-gray-500">常见问题、操作指南</p>
                        </div>
                        <i class="fas fa-chevron-right text-gray-400"></i>
                    </div>

                    <div onclick="openCustomerService()" class="bg-white rounded-lg border border-gray-200 p-3 flex items-center cursor-pointer hover:bg-gray-50">
                        <div class="w-10 h-10 bg-green-500 rounded-lg flex items-center justify-center text-white mr-3">
                            <i class="fas fa-headset"></i>
                        </div>
                        <div class="flex-1">
                            <p class="text-sm font-medium">在线客服</p>
                            <p class="text-xs text-gray-500">7×24小时专属服务</p>
                        </div>
                        <div class="flex items-center">
                            <span class="w-2 h-2 bg-green-500 rounded-full mr-2"></span>
                            <span class="text-xs text-green-600">在线</span>
                            <i class="fas fa-chevron-right text-gray-400 ml-2"></i>
                        </div>
                    </div>

                    <div onclick="openFeedback()" class="bg-white rounded-lg border border-gray-200 p-3 flex items-center cursor-pointer hover:bg-gray-50">
                        <div class="w-10 h-10 bg-orange-500 rounded-lg flex items-center justify-center text-white mr-3">
                            <i class="fas fa-comment-alt"></i>
                        </div>
                        <div class="flex-1">
                            <p class="text-sm font-medium">意见反馈</p>
                            <p class="text-xs text-gray-500">产品建议、问题反馈</p>
                        </div>
                        <i class="fas fa-chevron-right text-gray-400"></i>
                    </div>

                    <div class="bg-red-50 border border-red-200 rounded-lg p-3 flex items-center justify-center cursor-pointer hover:bg-red-100" onclick="logout()">
                        <i class="fas fa-sign-out-alt text-red-500 mr-2"></i>
                        <span class="text-red-600 font-medium">退出登录</span>
                    </div>
                </div>
            </div>
        </div>

        <!-- Bottom Navigation -->
        <div class="absolute bottom-0 left-0 right-0 bg-white border-t border-gray-200">
            <div class="flex justify-around py-2">
                <a href="merchant-center.html" class="flex-1 text-center py-2">
                    <i class="fas fa-home text-xl text-gray-400 mb-1"></i>
                    <p class="text-xs text-gray-400">首页</p>
                </a>
                <a href="b2b-dashboard.html" class="flex-1 text-center py-2">
                    <i class="fas fa-chart-bar text-xl text-gray-400 mb-1"></i>
                    <p class="text-xs text-gray-400">数据</p>
                </a>
                <a href="b2b-profile.html" class="flex-1 text-center py-2">
                    <i class="fas fa-user text-xl text-indigo-600 mb-1"></i>
                    <p class="text-xs text-indigo-600">我的</p>
                </a>
            </div>
        </div>
    </div>

    <script>
        // Load merchant info from localStorage
        function loadMerchantInfo() {
            const merchantData = localStorage.getItem('merchantData');
            if (merchantData) {
                try {
                    const data = JSON.parse(merchantData);
                    if (data.companyName) {
                        document.getElementById('merchant-name').textContent = data.companyName;
                    }
                    if (data.merchantId) {
                        document.getElementById('merchant-id').textContent = '商家ID: ' + data.merchantId;
                    }
                } catch (e) {
                    console.log('Error loading merchant info:', e);
                }
            }
        }

        // Navigation functions
        function editProfile() {
            alert('编辑资料功能\n\n可以修改：\n• 店铺名称\n• 店铺简介\n• 联系方式\n• 头像logo');
        }

        function openSettings() {
            alert('设置中心\n\n包含：\n• 通知设置\n• 隐私设置\n• 语言设置\n• 主题设置');
        }

        function openNotifications() {
            alert('消息通知\n\n类型：\n• 系统通知\n• 订单提醒\n• 营销活动\n• 政策更新');
        }

        function openCompanyInfo() {
            window.location.href = 'b2b-company-info.html';
        }

        function openBankInfo() {
            window.location.href = 'b2b-bank-info.html';
        }

        function openSecuritySettings() {
            window.location.href = 'b2b-security-settings.html';
        }

        function openApiSettings() {
            window.location.href = 'b2b-api-settings.html';
        }

        function openStoreSettings() {
            window.location.href = 'store-settings.html';
        }

        function openDeliverySettings() {
            window.location.href = 'b2b-delivery-settings.html';
        }

        function openPaymentSettings() {
            window.location.href = 'b2b-payment-settings.html';
        }

        function openInvoiceCenter() {
            window.location.href = 'b2b-invoice-center.html';
        }

        function openContractCenter() {
            window.location.href = 'b2b-contract-center.html';
        }

        function openDataExport() {
            window.location.href = 'b2b-data-export.html';
        }

        function openHelpCenter() {
            window.location.href = 'b2b-help-center.html';
        }

        function openCustomerService() {
            window.location.href = 'b2b-customer-service.html';
        }

        function openFeedback() {
            window.location.href = 'b2b-feedback.html';
        }

        function logout() {
            if (confirm('确定要退出登录吗？\n\n退出后需要重新登录才能访问商家功能。')) {
                localStorage.removeItem('merchantData');
                window.location.href = 'merchant-entry.html';
            }
        }

        // Initialize page
        document.addEventListener('DOMContentLoaded', function() {
            loadMerchantInfo();
            
            // Update navigation
            setTimeout(function() {
                if (typeof updateBottomNavigation === 'function') {
                    updateBottomNavigation();
                }
                if (typeof setupIframeMessaging === 'function') {
                    setupIframeMessaging();
                }
            }, 50);
        });
    </script>
</body>
</html>